<template>
    <div class="add">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="教师姓名" prop="name">
				<el-input v-model="form.name" />
			</el-form-item>
			<el-form-item label="教师性别" prop="gender">
				<el-radio-group v-model="form.gender">
					<el-radio :label="1">男</el-radio>
					<el-radio :label="0">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="教师职务" prop="station_id">
				<el-select v-model="form.station_id" placeholder="请选职务">
					<el-option :label="item.name" :value="item.id" v-for="(item,index) in stations" :key="index" />
				</el-select>
			</el-form-item>
			<el-form-item label="职工号" prop="jobnum">
				<el-input v-model="form.jobnum" />
			</el-form-item>
			<el-form-item label="手机号" prop="account">
				<el-input v-model="form.account" />
			</el-form-item>
			<el-form-item label="工作照">
				<UpPicture v-model="form.avatar" />
			</el-form-item>
			<el-form-item label="教师简介">
				<el-input type="textarea" :rows="10" resize="none" maxlength="500" show-word-limit :autosize="false" v-model="form.introduce" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">立即注册</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import UpPicture from "co/UpPicture";
	import tool from "ut/tool";
    export default {
        name: 'WebTeacherAdd',
		components: { UpPicture },
		data() {
			return {
				form: {
					name: '',
					gender: 1,
					station_id: '',
					jobnum: '',
					account: '',
					// avatar: 'https://file.my2171.com/img/biue/1679670528499.png',
					avatar: 'https://mp-89d96682-3acc-41f9-8860-a1fe03e7e0cf.cdn.bspapp.com/word/教师头像.jpg',
					introduce: '',
				},
                rules: {
                    name: { required: true, message: '请输入教师姓名' },
                    gender: { required: true, message: '请选择教师性别' },
                    station_id: { required: true, message: '请选择教师职务' },
                    jobnum: { required: true, message: '请输入职工号' },
                    account: { required: true, message: '请输入手机号' },
                }
			};
		},
		computed: {
			...mapState('Teacher',['stations'])
		},
		methods: {
			...mapActions('Teacher',['getStations','addTeacher']),
            submit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.addTeacher(this.form);
                    }
                })
            },
		},
		mounted(){
			this.getStations();
		}
    };
</script>

<style lang="less" scoped>
	@import "asle/index.less";
	.add {
		.w(500px);
	}
</style>